<template>
	<div>
	  <el-card class="box-card">
		<template #header>
		  <div class="card-header">
			<span>风险评估</span>
			<el-button class="button" text @click.stop="openDetail">{{ showDetail ? '收起' : '查看详情' }}</el-button>
		  </div>
		</template>
		<div class="text item">
		  
		  <el-button :icon="Refresh" circle @click="getRskData" />
		  <p v-if="rsk != null">风险因子：{{rsk}}</p>
		  <p v-else>尚未评估</p>
		  <img class="small-icon" src="../../../public/图片2.png" alt="PDR" />
		</div>
	  </el-card>
	  <transition name="expand">
		<div v-if="showDetail" class="detail-content">
		  <el-row :gutter="20">
			<el-col :span="12">
			  <div class="pdf-container">
				<embed :src="pdfPath" width="100%" height="750px" type="application/pdf" />
			  </div>
			</el-col>
			<el-col :span="12">
			  <el-button @click="addRow" class="action-button">添加行</el-button>
			  <el-button @click="saveData" class="action-button">保存</el-button>
			  <el-table :data="tableData" border fit style="width: 100%">
				<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
				  :min-width="column.width">
				  <template #default="scope">
					<el-input v-if="column.prop != 'riskValue' && column.prop != 'riskCategory' && scope.row.editable"
					  v-model="scope.row[column.prop]" @blur="scope.row.editable = false" />
					<el-select v-if="column.prop === 'riskCategory' && scope.row.editable" v-model="scope.row.riskCategory"
					  placeholder="请选择风险类别">
					  <el-option v-for="category in riskCategories" :key="category" :label="category" :value="category">
					  </el-option>
					</el-select>
					<el-input-number v-if="column.prop === 'riskValue' && scope.row.editable" v-model="scope.row.riskValue"
					  :min="1" :max="5" controls-position="right" style="width: 100%">
					</el-input-number>
					<span v-if="!scope.row.editable">{{ scope.row[column.prop] }}</span>
				  </template>
				</el-table-column>
				<el-table-column label="操作" width="120">
				  <template #default="scope">
					<el-button type="text" @click="editRow(scope.row)" v-if="!scope.row.editable">
					  编辑
					</el-button>
					<el-button type="text" @click="deleteRow(scope.$index)" v-if="!scope.row.editable">
					  删除
					</el-button>
					<el-button type="text" @click="scope.row.editable = false" v-if="scope.row.editable">
					  保存
					</el-button>
				  </template>
				</el-table-column>
			  </el-table>
			</el-col>
		  </el-row>
		  <el-divider></el-divider>
		  <el-button @click="closeDetail" class="close-button" type="primary" size="large">关闭</el-button>
		</div>
	  </transition>
	</div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import * as XLSX from 'xlsx';
  import { uploadFile, getProcess, updateProcessHistory } from '../../api/Cost/costApi';
  import { currentProjectTask } from './Variables/costVariables';
  import { getRskInfo, updateRskInfo } from '../../api/Cost/rskApi';
  import { getProjectDetails } from '../../api/Report/projectData';
  import { Refresh } from '@element-plus/icons-vue';
  import { ElMessage } from 'element-plus'
  
  
  const showDetail = ref(false);
  const pdfPath = ref();
  const riskCategories = ref(['开发需求风险', '开发技术风险', '项目进度风险', '项目人员风险', '项目质量风险']);
  const rsk = ref();
  
  const tableData = ref([
	{ riskName: '', riskCategory: '', riskDescription: '', riskValue: 0 },
  ]);
  const columns = ref([
	{ prop: 'riskName', label: '风险名称', width: '100' },
	{ prop: 'riskCategory', label: '风险类别', width: '90' },
	{ prop: 'riskDescription', label: '风险描述', width: '180' },
	{ prop: 'riskValue', label: '风险取值', width: '90' },
  ]);
  
  const processSet = ref({
	pdr_process: 0,
	rdf_process: 0,
	swf_process: 0,
	rsk_process: 0,
	cost_process: 0,
	total_process: 0
  });
  const task = ref();
  
  const fetchProcess = async () => {
	const res = await getProcess(currentProjectTask.projectId);
	processSet.value = res.data;
	task.value = res.task;
	updateProcessHistory(task.value);
  };
  
  const getPDFUrl = async () => {
	const res = await getProjectDetails(currentProjectTask.projectId);
	pdfPath.value = res.project.url;
  };
  getPDFUrl();
  
  const getRskData = async () => {
	const res = await getRskInfo(currentProjectTask.projectId);
	tableData.value = res.rskData;
	rsk.value = res.rskFactor;
  };
  getRskData();
  
  const addRow = () => {
	tableData.value.push({ riskName: '', riskCategory: '', riskDescription: '', riskValue: 0 });
  };
  
  const editRow = (row: any) => {
	row.editable = true;
  };
  
  const deleteRow = (index: any) => {
	tableData.value.splice(index, 1);
  };
  
  const saveData = async () => {
	const ws = XLSX.utils.json_to_sheet(tableData.value);
	const wb = XLSX.utils.book_new();
	XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
	const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
	const s2ab = (s: any) => {
	  const buf = new ArrayBuffer(s.length);
	  const view = new Uint8Array(buf);
	  for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
	  return buf;
	};
	const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
	const formData = new FormData();
	formData.append('file', blob, 'table.xlsx');
	const url = await uploadFile(formData);
	const data = ref({
	  projectId: currentProjectTask.projectId,
	  rskUrl: url,
	  rskFactor: 0
	});
	await updateRskInfo(data.value);
	await fetchProcess();
	await getRskData();
	ElMessage({
	    message: '保存成功',
	    type: 'success',
	  });
  };
  
  const openDetail = () => {
	showDetail.value = true;
  };
  
  const closeDetail = () => {
	showDetail.value = false;
  };
  </script>
  
  <style scoped>
  .box-card {
	background-color: #f3dbdb;
	border: 1px solid #fadbdb;
	border-radius: 12px;
	padding: 20px;
	height: 260px;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .box-card:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 25px;
	font-weight: bold;
  }

  .small-icon {
  width: 160px;
  height: 82px;
  margin-right: 11px;
}
  
  .text {
	font-size: 16px;
	margin-top: 10px;
	color: black;
  }
  
  .detail-content {
	position: fixed;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	background-color: #fff;
	z-index: 1000;
	padding: 20px;
	overflow: auto;
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	transform: scale(1);
	opacity: 1;
	transition: all 0.5s ease;
  }
  
  .expand-enter-active,
  .expand-leave-active {
	transition: all 0.5s ease;
  }
  
  .expand-enter,
  .expand-leave-to {
	transform: scale(0.8);
	opacity: 0;
  }
  
  .pdf-container {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .el-divider {
	margin: 20px 0;
  }
  
  .close-button {
	position: absolute;
	top: 20px;
	right: 20px;
  }
  
  .action-button {
	margin: 10px;
  }
  </style>
  